Shadow DOM

それにより、カスタム要素のマークアップ構造、スタイル、および動作をページ上の他のコードから分離し、コンフリクトが起きないようにすると同時に、コードを綺麗に保つことができます

Shadow DOM API を使用すると、指定された要素に隠されたDOMツリー（シャドウツリー）をアタッチすることもできます

DOMをカプセル化する

JavaScriptやCSSのscopeを作る

外部からの影響を受けない

継承されないってことか

Reactのpropsみたいなイメージか？

外部へ影響しない

カプセル化したDOMのroot

https://gyazo.com/715e0ca6241bbd310f016348f4096bbd https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

code:js

const div = document.getElementById('area');

const shadowRoot = div.attachShadow({ mode: 'open' });

Shadow DOMとCustom Elementの指しているものの違いがわからん

code:html

<style>

.pink {

--color: pink;

}

</style>

<my-button class="pink">my button</my-button>

code:css

button {

background-color: var(--color);

}

カプセル化された「シャドウ」 DOM ツリーを要素に紐付け、関連する機能を制御するための、一連の JavaScript API

シャドウ DOM ツリーは、メイン文書の DOM とは別にレンダリングされる

こうして、要素の機能を公開せずに済み、文書の他の部分との重複を恐れることなく、スクリプト化やスタイル化できる

code:html

<p>Hello, world!</p>

</div>

code:js

const div = document.getElementById('area');

// divにShadow Rootをアタッチする

const shadowRoot = div.attachShadow({ mode: 'open' });

// Shadow Rootの中身を書く

shadowRoot.innerHTML = `

<style>

p {

border: 1px solid red;

}

</style>

<p>↓↓↓↓↓</p>

<slot></slot>

<p>↑↑↑↑↑</p>

`;

↑こう書いた時に、↓こういうイメージのものになる

code:html

<style>

p {

border: 1px solid red;

}

</style>

<p>↓↓↓↓↓</p>

<p>Hello, world!</p>

<p>↑↑↑↑↑</p>

</div>

slotで埋め込んだものに対しては適用されない

styled-componentsってこうなってたっけ？

styleの指定の仕方にもよるけど、普通はそうなってるか。

どういうもの？

JSが必須？

何が嬉しい？　

React Componentはこれらを内包していると思うが、なぜ別概念なの？